<template>
	<view>
		<cu-custom :bgcolor="'#fff'" />
		<view class="shop-list">
			<view class="list-box pt-3 pb-3 pl-4 pr-4 mb-2">
				<view class="tip p-4 mb-2">
					<view class="text-danger font-md">
						什么是转移商品分类？ 在添加商品或者在商品管理中，如果需要对商品的分类进行变更，那么你可以通过此功能，正确管理你的商品分类。</view>
				</view>
				<view class="list pl-3 pr-3 pt-2 pb-2">
					<view class="content span-20">
						<view class="pt-2 pb-2 d-flex flex-column">
							<view class="d-flex flex-column a-center j-sb span-20">
								<view class="text-light-muted span-20">
									<text class="mb-1 d-block">从此类:</text>
									<uni-data-picker placeholder="请选择分类" popup-title="请选择分类" :localdata="shopClassList"
										v-model="cat_id" @change="chageValu" @nodeclick="onnodeclick"
										 @popupclosed="onpopupclosed">
									</uni-data-picker>
								</view>
								<view class="text-light-muted span-20">
									<text class="mb-1 d-block">转移到:</text>
									<uni-data-picker placeholder="请选择分类" popup-title="请选择分类" :localdata="shopClassList"
										v-model="target_cat_id" @change="chageTargetValu" @nodeclick="onTargetclick"
										 @popupclosed="onTargetclosed">
									</uni-data-picker>
								</view>

							</view>
						</view>
					</view>
				</view>
				<view class="button-box mt-5">
					<button class="main-bg-color text-white font-md" @click="submit">确认</button>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import title from "@/components/common/title.vue"
	import cuCustom from '@/components/common/custom.vue'
	import interceptor from "@/utils/request.js"
	export default {
		components: {
			title,
			cuCustom
		},
		data() {
			return {
				value: 0,
				cat_id: "",
				target_cat_id: "",
				shopClassList: [],
				cat_item: null,
				target_item: null
			}
		},
		onLoad() {

		},
		onShow() {
			this.getShopClassList()
		},
		methods: {
			submit(){
				let params = {
					supplier_id:uni.getStorageSync("supplier_id"),
					cat_id: this.cat_id,
					target_cat_id: this.target_cat_id,
					move_cat:"开始转移"
				}
				interceptor.get('/supplier_applet_api.php?act=moveCategory',params).then((res) => {
					if(res.status === 1){
						uni.showToast({
							title:"商品转移成功",
							icon:"success",
							success() {
								uni.navigateBack()
							}
						})
					}else{
						uni.showToast({
							title: res.msg,
							icon:"none"
						})
					}
				})
			},
			// 获取分类列表
			getShopClassList() {
				this.shopClassList = []
				interceptor.get('/supplier_applet_api.php?act=cateList', {
					supplier_id: uni.getStorageSync("supplier_id")
				}).then((res) => {
					if (res.status === 1) {
						const {
							info
						} = res
						let catList = JSON.parse(JSON.stringify(info.cat_info))
						// this.shopClassList = catList
						catList.map((item) => {
							item.text = item.cat_name
							item.value = item.cat_id
							if (item.children) {
								item.children.map((child) => {
									child.text = child.cat_name
									child.value = child.cat_id
								})
							}
						})
						this.shopClassList = catList
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			onpopupclosed() {
				//处理不同步
				this.$nextTick(() => {
					if (!this.cat_item) return
					this.chageValu(this.cat_item)
				});
			},
			chageValu(value) {
				this.cat_id = value.id
			},
			onnodeclick(e) {
				//如果是子级e会有内置的parent_value，同时方便后台数据渲染添加
				this.cat_item = e
			},
			onTargetclosed() {
				//处理不同步
				this.$nextTick(() => {
					if (!this.target_item) return
					this.chageTargetValu(this.target_item)
				});
			},
			chageTargetValu(value) {
				this.target_cat_id = value.id
			},
			onTargetclick(e) {
				//如果是子级e会有内置的parent_value，同时方便后台数据渲染添加
				this.target_item = e
			}
		}
	}
</script>

<style scoped lang="scss">
	.list-box {
		height: auto;

		.list {
			background: #FFFFFF;
			border-radius: 20rpx;
			height: auto;

		}

		.tip {
			background: #DCDCDC;
			border-radius: 19rpx;
		}
	}

	.title-box {
		position: relative;

		.addIcon {
			position: absolute;
			right: 10rpx;
			top: 13px;
		}
	}
</style>